<template>
  <span>
    <el-card v-show="orderVisible" id="order_card" class="box-card">
      <div>
        <el-divider content-position="left">
          <i class="el-icon-mobile-phone"></i> 订单信息</el-divider
        >
        <div class="order_info">
          <el-form
            :label-position="'left'"
            :model="newOrderForm"
            :rules="rules"
            ref="newOrderFormRef"
            label-width="100px"
          >
            <el-form-item label="邮箱信息" prop="email">
              <el-input v-model="newOrderForm.email"></el-input>
            </el-form-item>

            <el-form-item required label="收货人" prop="receiver">
              <el-input v-model="newOrderForm.receiver"></el-input>
            </el-form-item>

            <el-form-item label="地区" prop="area">
              <el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange"
              >
              </el-cascader>
            </el-form-item>

            <el-form-item required label="详细地址" prop="addressdetail">
              <el-input v-model="newOrderForm.addressdetail"></el-input>
            </el-form-item>

            <el-form-item required label="手机号码" prop="phonenumber">
              <el-input v-model="newOrderForm.phonenumber"></el-input>
            </el-form-item>
            <div>
              <div>
                <span>支付方式：</span
                ><el-radio v-model="paytype" label="线上支付"></el-radio>
                <span>配送方式：</span
                ><el-radio v-model="delivery" label="送货上门"></el-radio>
              </div>
              <div class="btn_submit_order">
                <el-button
                  @click="submitOrder(type)"
                  icon="el-icon-thumb"
                  type="danger"
                  >提交订单</el-button
                >
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </el-card>
  </span>
</template>

<script>
import {
  submitPhoneOrder,
  submitBroadbandOrder,
  submitTrafficOrder,
} from "../api/customer";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import baseMixin from "../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  props: ["product", "orderVisible", "type"],
  data() {
    return {
      num: 1,
      newOrderForm: {},
      paytype: "线上支付",
      delivery: "送货上门",
      rules: {
        email: [
          {
            required: true,
            message: "邮箱信息不可为空！",
            trigger: "blur",
          },
        ],
        receiver: [
          {
            required: true,
            message: "收货人信息不可为空！",
            trigger: "blur",
          },
        ],
        addressdetail: [
          {
            required: true,
            message: "详细地址信息不可为空！",
            trigger: "blur",
          },
        ],
        phonenumber: [
          {
            required: true,
            message: "电话信息不可为空！",
            trigger: "blur",
          },
        ],
      },
      options: regionData,
      selectedOptions: [],
    };
  },
  methods: {
    handleChange(value) {
      let province = CodeToText[value[0]];
      let city = CodeToText[value[1]];
      let district = CodeToText[value[2]];
      this.newOrderForm.area = province + city + district;
    },
    submitOrder(type) {
      //检验用户是否填写完整
      let formName = "newOrderFormRef";
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (typeof this.newOrderForm.area === "undefined") {
            this.$message.error("您好，请填入地区信息！");
            return;
          }
          this.newOrderForm.number = this.product.number;
          if (type === "phone") {
            submitPhoneOrder(this.newOrderForm)
              .then((res) => {
                let code = res.code;
                let message = res.message;
                if (code === 201) {
                  this.$message.error(message);
                } else {
                  this.$message.success(message);
                  this.$refs[formName].resetFields();
                }
              })
              .catch((err) => {
                this.$message.error(err);
              });
          } else if (type === "broadband") {
            submitBroadbandOrder(this.newOrderForm)
              .then((res) => {
                let code = res.code;
                let message = res.message;
                if (code === 201) {
                  this.$message.error(message);
                } else {
                  this.$message.success(message);
                  this.$refs[formName].resetFields();
                }
              })
              .catch((err) => {
                this.$message.error(err);
              });
          } else if (type === "traffic") {
            submitTrafficOrder(this.newOrderForm)
              .then((res) => {
                let code = res.code;
                let message = res.message;
                if (code === 201) {
                  this.$message.error(message);
                } else {
                  this.$message.success(message);
                  this.$refs[formName].resetFields();
                }
              })
              .catch((err) => {
                this.$message.error(err);
              });
          }
        }
      });
    },
  },
  mounted() {},
  watch: {
    product: {
      handler(val) {
        let newVal = val;
        this.product = val;
        let user = this.getUserInfo();
        if (user === null) {
          return;
        }
        this.newOrderForm.username = user.username;
        this.newOrderForm.email = user.email;
        this.newOrderForm.price = newVal.discountprice;
        this.newOrderForm.supplierid = newVal.supplierid;
        if (typeof newVal.phoneid !== "undefined") {
          this.newOrderForm.phoneid = newVal.phoneid;
          this.newOrderForm.phonename = newVal.phonename;
          this.newOrderForm.phonesize = newVal.phonesize;
          this.newOrderForm.phonetype = newVal.phonetype;
          this.newOrderForm.phonecolor = newVal.phonecolor;
        } else if (typeof newVal.broadbandid !== "undefined") {
          this.newOrderForm.broadbandid = newVal.broadbandid;
          this.newOrderForm.broadbandname = newVal.broadbandname;
          this.newOrderForm.broadbandtype = newVal.broadbandtype;
        } else if (typeof newVal.trafficid !== "undefined") {
          this.newOrderForm.trafficid = newVal.trafficid;
          this.newOrderForm.trafficname = newVal.trafficname;
          this.newOrderForm.traffictype = newVal.traffictype;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss">
@import "../assets/css/global.scss";
@import "../assets/css/product_details.scss";
</style>